<template>
    <div class="section type5">
        <div class="tp-banner-container">
            <div class="tp-banner">
                <ul>
                    <!-- SLIDE  -->

                    <!-- TODO -->
                    <!--修改动画，修改图片和文字填充-->

                    <li data-transition="random" data-slotamount="7" data-masterspeed="700" data-title="Responsive Design">
                        <!-- MAIN IMAGE -->
                        <img src="static/img/slider/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                        <!-- LAYERS -->
                        <!-- LAYER NR. 1 -->
                        <div class="tp-caption sfr randomrotateout" data-x="695" data-y="35" data-speed="500" data-start="1500" data-easing="Power4.easeOut"><img src="static/img/slider/browser.png" alt="" data-ww="500" data-hh="444">
                        </div>
                        <!-- LAYER NR. 2 -->
                        <div class="tp-caption sfb randomrotateout" data-x="585" data-y="184" data-speed="500" data-start="2000" data-easing="Power4.easeOut"><img src="static/img/slider/ipad.png" alt="" data-ww="250" data-hh="317">
                        </div>
                        <!-- LAYER NR. 3 -->
                        <div class="tp-caption sfb randomrotateout" data-x="775" data-y="275" data-speed="500" data-start="2500" data-easing="Power4.easeOut"><img src="static/img/slider/iphone.png" alt="" data-ww="150" data-hh="269">
                        </div>
                        <!-- LAYER NR. 4 -->
                        <div class="tp-caption emphatic_large_bold sft randomrotateout" data-x="170" data-y="120" data-speed="500" data-start="3000" data-easing="Power4.easeOut">RESPONSIVE DESIGN
                        </div>
                        <div class="tp-caption emphatic_small_bold sfl randomrotateout" data-x="170" data-y="175" data-speed="500" data-start="3500" data-easing="Power4.easeOut">Eam ad omnes vulputate, decore exerci<br /> minimum ex sed. Eam et velit everti. Semper indoctum eu<br /> nec, sed eu invidunt phaedrum liberavisse<br /> eu qui atqui constituam!
                        </div>
                        <!-- LAYER NR. 11 -->
                        <a href="" class="tp-caption btn adv-color squre thin sfb randomrotateout" data-x="170" data-y="290" data-speed="500" data-start="4000" data-easing="Power3.easeInOut">More Features &nbsp; &raquo;
                        </a>
                    </li>
                    <!-- SLIDE  -->
                    <li data-transition="random" data-slotamount="7" data-masterspeed="700" data-title="Responsive Design">
                        <!-- MAIN IMAGE -->
                        <img src="static/img/slider/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                        <!-- LAYERS -->
                        <!-- LAYER NR. 1 -->
                        <div class="tp-caption sfr randomrotateout" data-x="720" data-y="95" data-speed="500" data-start="1500" data-easing="Power4.easeOut"><iframe src="" width="460" height="259"></iframe>
                        </div>
                        <!-- LAYER NR. 4 -->
                        <div class="tp-caption emphatic_large_bold sft randomrotateout" data-x="170" data-y="120" data-speed="500" data-start="3000" data-easing="Power4.easeOut" style="color: #fff;">VIDEO SUPPORT
                        </div>
                        <div class="tp-caption emphatic_small_bold sfl randomrotateout" data-x="170" data-y="175" data-speed="500" data-start="3500" data-easing="Power4.easeOut" style="color: #fff">Eam ad omnes vulputate, decore exerci<br /> minimum ex sed. Eam et velit everti. Semper indoctum eu<br /> nec, sed eu invidunt phaedrum liberavisse<br /> eu qui atqui constituam!
                        </div>
                        <!-- LAYER NR. 11 -->
                        <a href="" class="tp-caption btn adv-color squre thin sfb randomrotateout" data-x="170" data-y="290" data-speed="500" data-start="4000" data-easing="Power3.easeInOut">More Features &nbsp; &raquo;
                        </a>
                    </li>
                    <!-- SLIDE  -->
                    <li data-transition="random" data-slotamount="7" data-masterspeed="700" data-title="Responsive Design">
                        <!-- MAIN IMAGE -->
                        <img src="static/img/slider/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                        <!-- LAYERS -->
                        <!-- LAYER NR. 1 -->
                        <div class="tp-caption sfr randomrotateout" data-x="625" data-y="100" data-speed="500" data-start="1500" data-easing="Power4.easeOut"><img src="static/img/slider/browser3.png" alt="" data-ww="500" data-hh="444">
                        </div>
                        <!-- LAYER NR. 1.2 -->
                        <div class="tp-caption sfr randomrotateout" data-x="695" data-y="35" data-speed="500" data-start="2000" data-easing="Power4.easeOut"><img src="static/img/slider/browser.png" alt="" data-ww="500" data-hh="444">
                        </div>
                        <!-- LAYER NR. 2 -->
                        <div class="tp-caption emphatic_large_bold sft randomrotateout" data-x="170" data-y="120" data-speed="500" data-start="3000" data-easing="Power4.easeOut">EASY TO CUSTOMIZE
                        </div>
                        <div class="tp-caption emphatic_small_bold sfl randomrotateout" data-x="170" data-y="175" data-speed="500" data-start="3500" data-easing="Power4.easeOut">Eam ad omnes vulputate, decore exerci<br /> minimum ex sed. Eam et velit everti. Semper indoctum eu<br /> nec, sed eu invidunt phaedrum liberavisse<br /> eu qui atqui constituam!
                        </div>
                        <!-- LAYER NR. 11 -->
                        <a href="" class="tp-caption btn adv-color squre thin sfb randomrotateout" data-x="170" data-y="290" data-speed="500" data-start="4000" data-easing="Power3.easeInOut">More Features &nbsp; &raquo;
                        </a>
                    </li>
                </ul>
                <div class="tp-bannertimer tp-bottom"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"tpbanner",
    data(){
        return{
        }
    }
}
</script>
